<template>
  <div class="daily-pro">
    <div class="daily-pro-title">
      <img class="img-width-max" src="/static/img/home-daily.png">
    </div>
    <router-link tag="div" v-if="banner.url" :to="banner.url" class="members_imgad">
      <img class="img-width-max" :src="banner.path">
    </router-link>
    <div v-else class="members_imgad">
      <img class="img-width-max" :src="banner.path">
    </div>
    <ul class="pro-box">
      <router-link tag="li" :to="'/detail/' + item.id" class="daily-box-list" v-for="item of listDaily.slice(0, 4)" :key="item.id">
        <img class="img-width-max" v-lazy="item.imgUrl">
        <p class="goods-title">{{item.title}}</p>
        <span class="goods-price"><span class="yen">￥</span>{{item.newsMoney}}</span>
        <span class="old-price"><span class="yen">￥</span>{{item.oldMoney}}</span>
        <span class="sale">已售 {{item.saleNum}}</span>
      </router-link>
    </ul>
    <div class="daily-pro-title">
      <img class="img-width-max" src="/static/img/home-pro.png">
    </div>
    <router-link tag="div" v-if="bannerClear.url" :to="bannerClear.url" class="members_imgad">
      <img class="img-width-max" :src="bannerClear.path">
    </router-link>
    <div v-else class="members_imgad">
      <img class="img-width-max" :src="bannerClear.path">
    </div>
    <ul class="pro-box">
      <router-link tag="li" :to="'/detail/' + item.id" class="daily-box-list" v-for="item of listSale.slice(0, 4)" :key="item.id">
        <img class="img-width-max" :src="item.imgUrl">
        <p class="goods-title">{{item.title}}</p>
        <span class="goods-price"><span class="yen">￥</span>{{item.newsMoney}}</span>
        <span class="old-price"><span class="yen">￥</span>{{item.oldMoney}}</span>
        <span class="sale">已售 {{item.saleNum}}</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeDailyPro',
  props: {
    listSale: Array,
    listDaily: Array,
    banner: Object,
    bannerClear: Object
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .daily-pro
    .pro-box
      background: #fff
      display: block
      overflow: hidden
      .daily-box-list
        box-sizing: border-box
        position: relative
        width: calc(50% - .2rem)
        float: left
        position: relative
        border:0.01rem solid #f3f3f3
        margin: .1rem .1rem .1rem
        text-align: center
        img
          overflow: hidden
          width: calc(100% - 0.04rem)
          margin-top:0.01rem
        .goods-title
          height: .44rem
          line-height: .44rem
          color: #333
          font-size: .28rem
          width: 95%
          ellipsis()
          padding: 0 .08rem
        .goods-price
          font-size: .32rem;
          color: #f61d4b;
          font-weight: 700;
          margin: .08rem 0;
          display: inline-block;
          text-indent: .1rem;
          .yen
            font-size: .24rem;
        .old-price
          font-size: .28rem;
          color: #bebebe;
          margin: .08rem 0;
          display: inline-block;
          text-indent: .1rem;
          text-decoration: line-through;
        .sale
          display: block;
          color: #232323;
          margin: .06rem 0;
          text-indent: .1rem;
          color: #64635f;
          text-align: right;
          margin-right: .06rem;
          font-size: .24rem
</style>
